<template>
<div>
    <!-- 面包屑 -->
    <el-bread></el-bread>
    <!-- 添加按钮 -->
    <el-button type="primary" class="btn" @click="addDialog">添加</el-button>
    <!-- 列表 -->
    <v-list @edit="edit"></v-list>
    <!-- 弹框 -->
    <v-dialog :isShow="isShow" :isAdd="isAdd" @cancel="cancel" ref="dialogRef"></v-dialog>
</div>
</template>
<script lang='ts' setup>
// 引入面包屑组件
import elBread from '../../common/elbread.vue'
// 引入list组件
import vList from './list.vue'
// 引入dialog组件
import vDialog from './dialog.vue'
// 引入ref
import {ref} from 'vue'
// 用来控制弹框显示和隐藏
let isShow=ref(false)
let isAdd=ref(true)
// 打开弹框事件
const addDialog=()=>{
    isShow.value=true
    isAdd.value=true
}
// 取消弹框事件
const cancel=(e:boolean)=>{
    isShow.value=e
}
let dialogRef=ref()
// 打开编辑弹框事件
const edit=(e:number)=>{
    isShow.value=true
    isAdd.value=false
    dialogRef.value.lookup(e)
}
</script>
<style scoped>
.btn{
    margin: 15px;
}
</style>